@extends('layouts.default')

@section('title', '任教学科')

@push('scripts')
<script src="{{ asset('lib/xm-select-v1.2.4/xm-select.js')}}"></script>
<script>
    layui.use(['layer','form','table','laytpl','laydate','element','laypage','upload'], function(){
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var laytpl = layui.laytpl;
        var laydate = layui.laydate;
        var element = layui.element;
        var laypage = layui.laypage;
        var upload = layui.upload;
        var xmDemo;
        var xmDemo2;
        var xmDemo3; //调取资料时间
        var xmDemo4; //岗位级别
        var id = "{{request()->get('id',0)}}";
        var scale_id = "{{request()->get('scale_id',0)}}";
        var param = {}; 

        laydate.render({
            elem: '#check_start'
        });
        laydate.render({
            elem: '#check_end'
        });
        laydate.render({
            elem: '#submit_start'
        });
        laydate.render({
            elem: '#submit_end'
        });

    

        renderSelect(function(){
            //编辑
            if(id != 0){
                getJobFirst({'id':id},function(res){
                    if(res.code == 1){
                        form.val("formTest", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值                     
                            'data_version_id': res.data.data_version_id,
                            'name': res.data.name,
                            'comment': res.data.comment,
                            'check_start': res.data.check_start,
                            'check_end': res.data.check_end,
                            'submit_start': res.data.submit_start,
                            'submit_end': res.data.submit_end,
                            'sum': res.data.sum,
                            'id': res.data.id,
                            'scale_id': res.data.scale_id,
                            'created_at': res.data.created_at,
                        });
                        $('#nickname').text(res.data.author_name);
             
                        //岗位级别
                        xmDemo4.setValue(res.data.level_array);
                        //调取资料时间
                        xmDemo3.setValue(res.data.materials_array);
                        //文件
                        if(res.data.files_array.length>0){
                            var getTpl = demo.innerHTML
                                ,view = document.getElementById('files');
                                laytpl(getTpl).render(res.data.files_array, function(html){
                                view.innerHTML = html;                              
                            });
                        } 
                        //考评组长  
                        if( typeof(res.data.leader_array) != "undefined" ){
                            var getTpl = demo2.innerHTML
                                ,view = document.getElementById('kpzz');
                                laytpl(getTpl).render(res.data.leader_array, function(html){
                                view.innerHTML = html;                              
                            });
                        } 
                        //考评成员 
                        if( typeof(res.data.members_array) != "undefined" ){
                            var getTpl = demo3.innerHTML
                                ,view = document.getElementById('kpcy');
                                laytpl(getTpl).render(res.data.members_array, function(html){
                                view.innerHTML = html;                              
                            });
                        }                 
                    }
                })
             
                Object.assign(param, {"id": id});
                getList(1);
            }
        });

        function getList(page){
            Object.assign(param,{"page":page});		        		        	
            getApplyList(param,function(res){		
                if(res.code == 1){
                    table.render({
                        elem: '#tablelist'
                        // ,toolbar: '#toolbarDemo'
                        // ,defaultToolbar:[]
                        ,data: res.data.data
                        ,limit:res.data.limit
                        ,skin:'nob'
                        ,even:true
                        //,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                        ,cols: [[ 
                        {field: 'name', title: '教师姓名',width:'10%',align:'center'}							                  							
                        ,{field: 'subject', title: '任教学科',width:'10%',align:'center'}								                  															          
                        ,{field: 'old_level', title: '原岗位',width:'10%',align:'center'}	
                        ,{field: 'apply_level_name', title: '申报岗位',width:'10%',align:'center'}																
                       ,{field: 'pj_score', title: '分数',width:'10%',align:'center'}																
                       ,{field: '', title: '审核进度',width:'10%',align:'center',templet: function(d) {
                            return d.check_sum+'/'+d.zrs;                                                
                        }}														
                       ,{field: '', title: '状态',width:'10%',align:'center',templet: function(d) {
                            if(d.status == 0){
                                return '未提交'; 
                            }else{
                                return '已提交';
                            }                                                 
                        }}														
                       ,{field: 'created_at', title: '申报时间',width:'10%',align:'center'}														
                        ,{field: '', title: '操作',toolbar: '#barDemo',width:'',align:'center'}
                        ]]
                    });

                    $('#pageBar').empty();                     
                    if(res.data.total >0){
                        //分页
                        laypage.render({
                        elem: 'pageBar' //注意，这里的 test1 是 ID，不用加 # 号
                        ,count: [res.data.total] //数据总数，从服务端得到
                        ,curr: page
                        ,layout: ['limit', 'count', 'prev', 'page', 'next',  'skip']                               
                        ,limit:res.data.limit
                        ,jump: function(obj, first) {
                                //首次不执行
                                if (!first) {
                                    Object.assign(param,{"limit":obj.limit});                                
                                    getList(obj.curr)
                                }
                            }
                        });
                    }                        
                }else {
                    layer.msg(res.msg, {icon: 5});
                }                                    
            })
        }

         // 查询
         form.on('submit(queryBtn)', function(data) {
            Object.assign(param, {
                    "search": data.field
            });
            getList(1);
            return false; 
        });
       
        //重置
        $('button[type=reset]').click(function(){
            $('#search-form')[0].reset();
            $('button[lay-filter=queryBtn]').click(); 
            return false;    
        })

        //下拉框初始化
        async function renderSelect(callback){
             //获取字典下拉框数据
            await new Promise((resolve) => {
                getDictionaryItem({'diccode': ['title_teacher_rank','SUBJECT']}, function (res){
                    if(res.code === 1) { 
                        let data =  res.data.title_teacher_rank;
                        delete data[13];
                        xmDemo4 = xmSelect.render({
                            el: '#demo4',                            
	                        autoRow: true,
                            theme: {
                                color: '#2d8cf0',
                            },
                            prop: {
                                name: 'selectValue',
                                value: 'selectKey',
                            },                      
                            model: {
                                label: {
                                    type: 'block',
                                    block: {
                                        //最大显示数量, 0:不限制
                                        showCount: 0,
                                        //是否显示删除图标
                                        showIcon: false,
                                    }
                                }
                            },
                            disabled:true,
                            name:'level',
                            layVerify: 'required',
                            layVerType: 'msg',
                            layReqText:'岗位级别不能为空',
                            data: data
                        })

                        $('select[name=subject]').empty();
                        $('select[name=subject]').append('<option value="">请选择</option>');
                        for(var i in res.data.SUBJECT){
                            $('select[name=subject]').append('<option value="'+res.data.SUBJECT[i].selectValue+'">'+res.data.SUBJECT[i].selectValue+'</option>');
                        }

                        return resolve();
                    }
                });
            }); 

             //获取学期
            await new Promise((resolve) => {
                getTermData({},function(res){
                    if(res.code == 1){
                        $('select[name=data_version_id]').empty();
                        $('select[name=data_version_id]').append('<option value="">请选择</option>');
                        for(var i in res.data){
                            $('select[name=data_version_id]').append('<option value="'+res.data[i].id+'">'+res.data[i].title+'</option>');
                        }
                        form.render(); 
                        //调取资料时间
                        xmDemo3 = xmSelect.render({
                            el: '#demo33',                            
	                        autoRow: true,
                            theme: {
                                color: '#2d8cf0',
                            },
                            model: {
                                label: {
                                    type: 'block',
                                    block: {
                                        //最大显示数量, 0:不限制
                                        showCount: 0,
                                        //是否显示删除图标
                                        showIcon: false,
                                    }
                                }
                            },
                            disabled:true,
                            prop: {
                                name: 'title',
                                value: 'id',
                            },
                            name:'materials_date',
                            layVerify: 'required',
                            layVerType: 'msg',
                            layReqText:'调取资料时间不能为空',
                            data: res.data
                        })
                        return resolve();
                    }
                })
            }) 

            //量表
            await new Promise((resolve) => {
                getJobScale({},function(res){
                    if(res.code == 1){
                        $('select[name=scale_id]').append('<option value="">请选择</option>');
                        for(var i in res.data){
                            $('select[name=scale_id]').append('<option value="'+res.data[i].id+'">'+res.data[i].name+'</option>');
                        }
                        form.render(); 
                        return resolve();                             
                    }
                })
            }) 
        
            callback();
        }  

        table.on('tool(tablelist)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
     
            if(layEvent === 'checksee'){     
              window.location.href = "{{route('rating.job.checkSee')}}?job_id="+data.job_id+'&scale_id='+scale_id+'&user_id='+data.user_id+'&job_apply_id='+data.id+'&pj_score='+data.pj_score;
     
            }else if(layEvent === 'check'){
                window.location.href = "{{route('rating.job.check')}}?job_id="+data.job_id+'&scale_id='+scale_id+'&user_id='+data.user_id+'&job_apply_id='+data.id;
               
            }
        });

        //提交
        form.on('submit(formDemo)', function(data){
            data.field.level = xmDemo4.getValue('value');
            data.field.level_text = xmDemo4.getValue('nameStr');
            data.field.materials_date = xmDemo3.getValue('value');
            data.field.materials_text = xmDemo3.getValue('nameStr');
            data.field.members = xmDemo.getValue();
            data.field.leader = xmDemo2.getValue();

            data.field.status = 1;
            addJob(data.field,function(res){
                if(res.code == '1'){
                    layer.msg(res.msg,{icon: 6,time: 1000},function(){
                        window.history.back();
                    });
                }else{
                    layer.msg(res.msg, {icon: 5,shift : 6});
                }
           })
            return false;
        });

        //保存
        $('#formSave').click(function(){
            var isValid = form.validate('.data_version_id');
            if(!isValid){
                return false;
            }
            var data = form.val("formTest");   
            data.level = xmDemo4.getValue('value');
            data.level_text = xmDemo4.getValue('nameStr');
            data.materials_date = xmDemo3.getValue('value');
            data.materials_text = xmDemo3.getValue('nameStr');
            data.members = xmDemo.getValue();
            data.leader = xmDemo2.getValue();
            data.status = 0;
            addJob(data,function(res){
                if(res.code == '1'){
                    layer.msg(res.msg,{icon: 6,time: 1000},function(){
                        window.history.back();
                    });
                }else{
                    layer.msg(res.msg, {icon: 5,shift : 6});
                }
           })
            return false;
        })

        $('#daochu').click(function(){
            exportJobApply(param,function(res){
                if(res.code == '1'){
                    exportsDel('申报列表.xlsx','/download/excel/'+res.data.file_name);
                }else{
                    layer.msg(res.msg, {icon: 5,shift : 6});
                }
            });
        })

        //导出excel
        function exportsDel(showName,fileName){
            window.location.href = "{{route('download.FileDownloadDel')}}"+'?filename='+showName+'&file_url='+fileName;
        }
               
    });
</script>
<script id="demo" type="text/html">
    <ul style="line-height: 38px;"> 
        @{{#  layui.each(d, function(index, item){ }}
        <li >
            <a style="color:#0e90d2;" target="_blank" href="@{{item.url}}" >@{{item.file_name}} </a>
            <a style="color:#74B8FF" href="@{{item.url}}" download="@{{item.file_name}}" >
                <span class="icon pear-icon pear-icon-download" style="color:#74B8FF;margin-left:10px;" ></span>
            </a>
        </li>  
        @{{#  }); }}   
    </ul>
</script>
<script id="demo2" type="text/html">
@{{#  layui.each(d.all, function(k, v){ }}
      <span style="line-height: 38px;border: 1px solid #eee;padding: 10px;color:#0e90d2" >@{{v.name}}</span> 
@{{#  }); }}
</script>
<script id="demo3" type="text/html">
@{{#  layui.each(d.all, function(k, v){ }}
      <span style="line-height: 38px;border: 1px solid #eee;padding: 10px;color:#0e90d2" >@{{v.name}}</span> 
@{{#  }); }} 
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn layui-btn-primary layui-border-blue layui-btn-xs" lay-event="checksee"  btnPermission="">查看</a>
    @{{# if(d.is_check ==1 && d.status ==1){ }}
    <a class="layui-btn layui-btn layui-btn-primary layui-border-blue layui-btn-xs" lay-event="check"  btnPermission="299">审核</a>
    @{{# }else{ }}
    <a class="layui-btn layui-btn layui-btn-primary layui-border-blue layui-btn-xs layui-btn-disabled" lay-event=""  btnPermission="299">审核</a>
    @{{# } }} 
</script>
@endpush

@section('content')
<style>
    .opt-panel{padding: 20px;}
    .panel-title h3{font-weight: 800;margin-bottom: 20px;}

    #add-form{padding: 20px 5px;}
    .opt-area{display: flex;flex-direction: row-reverse;padding: 10px 20px;margin-bottom: 20px;}
    .opt-area button{margin-left: 10px;}
    .layui-card {box-shadow: none !important;}
</style>

<div class="layui-row">
    <div class="layui-panel opt-panel">
        <div class="panel-title">
            <h3>岗位竞聘</h3>
        </div>
        <form class="layui-form" action="" lay-filter="formTest">
            <div class="layui-row">
                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>学年学期：</label>
                        <div class="layuik-input-inline">
                            <select disabled class="data_version_id" name="data_version_id" lay-filter="termList" data-role="termList" lay-verify="required" lay-reqText="学年学期不能为空"></select>
                        </div>
                    </div>
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>岗位名称：</label>
                        <div class="layuik-input-inline">
                            <input disabled type="text" name="name" required lay-verify="required" placeholder="请输入" lay-reqText="岗位名称不能为空" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div> 

                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>岗位级别：</label>
                        <div class="layuik-input-inline">
                            <div type="text" id="demo4"  class="xm-select-demo"></div>
                        </div>
                    </div>
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>空缺数量：</label>
                        <div class="layuik-input-inline">
                            <input disabled type="text" name="sum" required lay-verify="number" placeholder="请输入" lay-reqText="空缺数量不能为空" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div> 

                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>申报起止时间：</label>
                        <div class="layuik-input-inline" style="width:38%">
                            <input disabled type="text" name="submit_start" id="submit_start" required lay-verify="required" placeholder="请输入" lay-reqText="申报开始不能为空" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid" style="width: 2%;text-align: right;" >-</div>
                        <div class="layuik-input-inline" style="width:38.5%;">
                            <input disabled type="text" name="submit_end" id="submit_end" required lay-verify="required" placeholder="请输入" lay-reqText="申报结束不能为空" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>考核起止时间：</label>
                        <div class="layuik-input-inline" style="width:38%">
                            <input disabled type="text" name="check_start" id="check_start" required lay-verify="required" placeholder="请输入" lay-reqText="考核开始不能为空" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid" style="width: 2%;text-align: right;" >-</div>
                        <div class="layuik-input-inline" style="width:38.5%;">
                            <input disabled type="text" name="check_end" id="check_end" required lay-verify="required" placeholder="请输入" lay-reqText="考核结束不能为空" autocomplete="off" class="layui-input">
                        </div>
                    </div>                  
                </div>

                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>调取资料时间：</label>
                        <div class="layuik-input-inline">
                        <div type="text" id="demo33"  class="xm-select-demo"></div>
                        </div>
                    </div>
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>考评量表：</label>
                        <div class="layuik-input-inline">
                            <select disabled name="scale_id"  lay-verify="required" lay-reqText="考评量表不能为空"></select>
                        </div>
                    </div>
                </div> 

                <div class="layuik-form-item ">
                    <div class="layuik-inline">
                        <label class="layuik-form-label">申报说明：</label>
                        <div class="layuik-input-inline" style="width: 85%;">
                        <textarea disabled name="comment" placeholder="请输入内容" class="layui-textarea"></textarea>
                        </div>
                    </div>              
                </div>

                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label">相关材料：</label>
                        <div class="layuik-input-inline">
                       
                        <div id="files" ></div>
                     
                        </div>
                      
                    </div>  
                </div> 

                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>创建人：</label>
                        <div class="layuik-input-inline">
                            <span style="line-height: 38px;border: 1px solid #eee;padding: 10px;" id="nickname"></span>
                        </div>
                    </div>
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>创建时间：</label>
                        <div class="layuik-input-inline">
                            <input disabled type="text" name="created_at" id="created_at" required lay-verify="required" placeholder="" lay-reqText="" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                

                <input type="hidden" name="id" value="" >
          
            </div>
            
        </form>
    </div>   
</div>
  
<div class="layui-row" style="margin-top:10px" >
    <div class="layui-panel opt-panel">
        <div class="panel-title">
            <h3>考核小组</h3>
        </div>
        <form class="layui-form" action="" >
            <div class="layuik-form-item ">
                <div class="layuik-inline">
                    <label class="layuik-form-label"><i class="redstar">*</i>考评组长：</label>
                    <div class="layuik-input-inline" style="width: 85%;">
                        <div id="kpzz"></div>
                        <!-- <span style="line-height: 38px;border: 1px solid #eee;padding: 10px;" ></span> -->
                    </div>
                </div>
            </div>

            <div class="layuik-form-item ">
                <div class="layuik-inline">
                    <label class="layuik-form-label"><i class="redstar">*</i>考评成员：</label>
                    <div class="layuik-input-inline" style="width: 85%;">
                        <div id="kpcy"></div>
                        <!-- <span style="line-height: 38px;border: 1px solid #eee;padding: 10px;" ></span> -->
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="layui-row" style="margin-top:10px" >
    <div class="layui-panel opt-panel">
        <div class="panel-title">
            <h3>申报列表</h3>
        </div>

        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-row">    
                    <form class="layui-form" id="search-form" >   
                        <div class="layui-form-item">             
                            
                            <div class="layui-inline">
                                <label class="layui-form-label" >姓名:</label>
                                <div class="layui-input-inline">                  
                                    <input autocomplete="off" type="text" name="name" class="layui-input" placeholder="请输入">                
                                </div>
                            </div>

                            <div class="layui-inline">
                                <label class="layui-form-label" >任教学科:</label>
                                <div class="layui-input-inline">                  
                                    <select data-role="" name="subject"   lay-filter="" >
                                    </select>               
                                </div>
                            </div>

                            <div class="layui-inline">
                                <label class="layui-form-label" >状态:</label>
                                <div class="layui-input-inline">                  
                                    <select data-role="" name="status"   lay-filter="" >
                                        <option value="">请选择</option>
                                        <option value="1">已提交</option>
                                        <option value="0">未提交</option>
                                    </select>                 
                                </div>
                            </div>

                            <div class="layui-inline" > 
                                <button lay-submit id="queryBtn" class="pear-btn pear-btn-md pear-btn-primary" lay-filter="queryBtn" >
                                    查询
                                </button>
                                <button type="reset" class="pear-btn pear-btn-md pear-btn-primary reset">
                                    重置
                                </button>
                                <button type="button" id="daochu" class="pear-btn pear-btn-md pear-btn-primary">
                                    导出
                                </button>
                            </div>
                     

                    </form>      
                </div>
            </div>
        </div>


        <div class="layui-card">

            <div class="layui-card-body">
                <table class="layui-table" id="tablelist" lay-filter="tablelist" ></table>
                <div class="pagebarbox" style="text-align: end"><div id="pageBar" class="pagebar"></div></div>
            </div>
        </div>
        
        <div class="layui-row">
                <div class="opt-area">
                    <a href="javascript:history.go(-1);" ><button class="layui-btn layui-btn-primary" type="button">返回</button></a>
             
                </div> 
            </div>
    </div>
</div>
@endsection